import { App } from 'vue';
import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router';
import LoginVue from '../views/Login/index.vue';
import { useUserStore } from '@/store/user/index';
import { user } from '@/api';
import { ElMessage, FormInstance } from 'element-plus';
const routes: RouteRecordRaw[] = [
    {
        path: '/login',
        name: 'login',
        // 一般来说，项目的第一个进入的页面不要使用 路由懒加载
        component: LoginVue,
    },
];

const router = createRouter({
    history: createWebHashHistory(),
    routes,
});

// 一般控制动态的路由是写在 全局前置守卫里面
router.beforeEach((to, from, next) => {
    // console.log(from.path);

    // pinia 里面的数据，一定要在 函数部分使用 useXXX 获取
    const userStore = useUserStore();
    let token = localStorage.getItem('token');

    // 如果没有登录，只让用户访问 login
    if (!token && to.path !== '/login') {
        next('/login');
    }
    // 如果已errorCaptured    经是登录状态，用户手动访问 /login  强制跳回  之前的页面 
    else if (token && to.path === '/login') {
        // 强制跳转回 来的地方
        next(from.path);
    }
    // 无论是登录后，还是 刷新后， 只要token还在就需要保持 用户的 菜单数据要有
    // 让路由每次跳转的时候，都检查一下，有没有 菜单数据 ，如果没有就需要重新请求
    //   如果是刷新后，from.path 永远是 /
    else if (
        token &&
        userStore.menus.length === 0 &&
        router.getRoutes().length === 1 &&
        (from.path === '/' || from.path === '/login')
    ) {
        // 登录成功后，需要请求用户的菜单数据
        user.userInfoApi().then(res => {
            if (res.code === 200) {
                // 得到了 该用户所有的菜单数据 等等
                // 把数据存到 pinia
                // console.log(res.data);
                userStore.menus = res.data.menus;
                // 为了不和store里面的数据冲突，把数据进行一份拷贝
                const menus: IMenu[] = JSON.parse(JSON.stringify(res.data.menus));
                // 现在直接使用 userStore.menu 进行生成动态路由
                const parents: IActiveMenu[] = menus.filter(menu => menu.parentId === 0);
                console.log("111", parents);

                menus.forEach(menu => {
                    // p 就是就一级路由
                    const p = parents.find(p => p.id === menu.parentId);
                    if (p) {
                        if (!p.children) {
                            p.children = [];
                        }
                        p.children.push(menu);
                    }
                });
                // 菜单数据回来了，可以生成动态路由了
                parents.forEach(parent => {
                    const route: RouteRecordRaw = {
                        // parent是一级菜单，一级菜单对应一级路由
                        path: '/' + parent.name,
                        name: parent.name,
                        // 注意： 所有的一级路由其实都是对应 home/index.vue
                        component: () => import('../views/Home/index.vue'),
                        children: [],
                        meta: {
                            title: parent.title,
                        },
                    };
                    //   然后添加子路由
                    parent.children?.forEach(child => {
                        route.children.push({
                            // path ===>  /一级/二级
                            path: `/${parent.name}/${child.name}`,
                            name: child.name,
                            component: () => import(`../views/${parent.name}/${child.name}.vue`),
                            meta: {
                                title: child.title,
                            },
                        });
                    });
                    // addRoute方法添加路由配置不是同步生效的，需要我们等等再进入
                    router.addRoute(route);
                });

                router.addRoute({
                    path: '/',
                    name: 'home',
                    redirect: '/index',
                    component: () => import('../views/Home/index.vue'),
                    children: [
                        {
                            path: '/index',
                            name: 'index',
                            component: () => import('../views/index/index.vue'),
                        },
                    ],
                });
                // 你想去哪，就是to.path
                // console.log(to);
                next(to.fullPath);
            }
        });
    } else {
        next();
    }
});

export default (app: App<Element>) => {
    app.use(router);
};

export { router };
